import './index.css';
import { Toast, Form, Input, Button } from 'antd-mobile';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { request, setToken } from '../../utils';

function Register() {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    return (
        <div className="register-container">
            <div className="register-form">
                <Form
                    requiredMarkStyle="text-optional"
                    layout="horizontal"
                    footer={
                        <Button block type="submit" color="primary" size="large" style={{ marginTop: '20px' }}>
                            注册
                        </Button>
                    }
                    hasFeedback={true}
                    onFinish={async (values) => {
                        try {
                            const res = await request.post('/api/auth/register', values);
                            setToken(res.access_token);
                            navigate('/'); // 执行跳转
                        } catch (error) {
                            console.error('登录流程错误:', error);
                            Toast.show({
                                content: error.response?.data?.message || '登录失败',
                                icon: 'fail',
                            });
                        }
                    }}
                    validateTrigger="onBlur"
                >
                    <Form.Header>
                        <h3 className="register-header">金鳞簿</h3>
                    </Form.Header>
                    <Form.Item
                        name="mobile"
                        label="账号"
                        rules={[
                            { required: true, message: '账号不能为空' },
                            { type: 'phone', warningOnly: true },
                            { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' },
                        ]}
                    >
                        <Input placeholder="请输入手机号" />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            { required: true, message: '密码不能为空' },
                            { pattern: /^[a-zA-Z0-9]{6,12}$/, message: '密码格式不正确' },
                        ]}
                    >
                        <Input placeholder="密码" />
                    </Form.Item>
                    <Form.Item
                        name="password_confirmation"
                        label="确认密码"
                        rules={[
                            { required: true, message: '密码不能为空' },
                            { pattern: /^[a-zA-Z0-9]{6,12}$/, message: '密码格式不正确' },
                        ]}
                    >
                        <Input placeholder="确认密码" />
                    </Form.Item>
                    <Form.Item name="name" initialValue={'用户123'}></Form.Item>
                    <span className="register-footer">
                        <a href="/login">登录</a>
                    </span>
                </Form>
            </div>
        </div>
    );
}

export default Register;